/* 
===================================
author:sam9029
date:2022/12/21
===================================
*/

/* 颜色变量 */
/* web theme 颜色 */
$web-theme-color:#fff;
$web-theme-color-100:#F3E5F5;
$web-theme-color-200:#E1BEE7;
$web-theme-color-300:#CE93D8;
$web-theme-color-400:#BA68C8;
$web-theme-color-500:#AB47BC;
$web-theme-color-600:#9C27B0;
$web-theme-color-700:#8E24AA;
$web-theme-color-800:#7B1FA2;
$web-theme-color-900:#6A1B9A;
$web-theme-color-1000:#4A148C;
/* 工具颜色 */ 
$web-bg-color-grey:#f1f1f1;

/*版心*/ 
.main-area-width{
	max-width: 1290px;
}

/*字体大小*/ 
.font-s{
	font-size: 1rem;
}

/*链接手指*/
.cursor-pointer{
	cursor: pointer;
}

/* root 颜色 */
:root{
    
  /* 自存颜色 */
  --devColor:#f1f1f1;

  /* // 白色字体 */
  --themeColor01:#ffffff;

  /* // 蓝色字体 */
  --themeColor02:#00B2E8;
  --themeColor0201:#072D4E90;
  --themeColor0202:#072D4E60;
  --themeColor0203:#072D4E30;

  /* //浅绿字体 */
  --themeColor03:#02F2F3; 

  
  /* // 底部人像橙色 //被选中颜色 //左标方点颜色 */
  --themeColor04:#FF9500;
  --themeColor0401:#956D1C;

  /* // 底部按钮蓝色背景 */
  --themeColor05:#0B2C57;
  /* // 顶部 人口结构 button 背景 */
  --themeColor06:#045383;
}


/* 页面公共封装工具类css ===================================start  */

/* 上下左右居中 */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
  
/* 定位上下 左右居中 配合position: relative; */
.p-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.theme-font-color{
  color: var(--themeColor01);
}
.button-bg{
  background-color: var(--themeColor06);
}
.button-select-bg{
  background-color: var(--themeColor0401);
}

.dashed-line{
	width:100%;
	height:1px;
	background-image:linear-gradient(to right,var(--themeColor02) 0%, var(--themeColor02) 50%, transparent 0%);
	background-size:5px 5px;
	background-repeat:repeat-x;
	border-radius:100px/100px;
}

.dev-font {
  color: #777;
}
.dev-font-color {
  color: #999999;
}
.dev-font-color-02 {
  color: #434343;
}
.font-theme-color {
  /* color: #4090FD; */
  color: #4088fe;
}

/* 标题加粗 */
/* 标题加粗 */
.titleL1 {
  margin: 20px 0 40px;
  font-size: 32px;
  color: #484848;
  font-weight: bold;
}

/* more */
/* more */
.more {
  font-size: 24px;
  font-weight: 100;
}

/* 标签 样式 */
/* 标签 样式 */
.tag-blue {
  padding: 5px;
  background-color: #e1edff;
  color: #4090fd;
}
.tag-purple {
  padding: 5px;
  background-color: #cdc8ed;
  color: rgba(128, 0, 128, 0.849);
}
.tag-orange {
  background-color: #f1f0d6;
  color: #f16c4b;
  padding: 5px;
}


/* 基础公共样式 ==============================================start */

/* 盒子box内容格式 */
.box-border {
  box-sizing: border-box;
}
.content-border{
  box-sizing:content-box;
}

/* 元素长宽 */
.w-100prec {
  width: 100%;
}
.h-100prec {
  height: 100%;
}
.w-50prec {
  width: 50%;
}
.h-50prec {
  height: 50%;
}
.w-100vw {
  width: 100vw;
}
.h-100vh {
  height: 100vh;
}
.w-50vw {
  width: 50vw;
}
.h-50vh {
  height: 50vh;
}


/* 盒子margin */
.m-5 {
  margin: 5px;
}
.m-10 {
  margin: 10px;
}
.m-15 {
  margin: 15px;
}
.m-20 {
  margin: 20px;
}
.m-50 {
  margin: 50px;
}
.m-100 {
  margin: 100px;
}
.m-150 {
  margin: 150px;
}
.m-200 {
  margin: 200px;
}

/* 盒子margin--上下间距 */
.m-tb-5 {
  margin: 5px 0;
}
.m-tb-10 {
  margin: 10px 0;
}
.m-tb-15 {
  margin: 15px 0;
}
.m-tb-20 {
  margin: 20px 0;
}
.m-tb-25 {
  margin: 25px 0;
}

.m-t-5 {
  margin-top: 5px;
}
.m-t-10 {
  margin-top: 10px;
}
.m-t-15 {
  margin-top: 15px;
}
.m-t-20 {
  margin-top: 20px;
}
.m-t-25 {
  margin-top: 25px;
}

.m-b-5 {
  margin-bottom: 5px;
}
.m-b-10 {
  margin-bottom: 10px;
}
.m-b-15 {
  margin-bottom: 15px;
}
.m-b-20 {
  margin-bottom: 20px;
}
.m-b-25 {
  margin-bottom: 25px;
}


/* 盒子margin--左右间距 */

.m-lr-5 {
  margin: 0 5px;
}
.m-lr-10 {
  margin: 0 10px;
}
.m-lr-15 {
  margin: 0 15px;
}
.m-lr-20 {
  margin: 0 20px;
}
.m-lr-25 {
  margin: 0 25px;
}

.m-l-5{
  margin-left: 5px;
}
.m-l-10{
  margin-left: 10px;
}
.m-l-15{
  margin-left: 15px;
}
.m-l-20{
  margin-left: 20px;
}
.m-l-25{
  margin-left: 25px;
}

.m-r-5{
  margin-right: 5px;
}
.m-r-10{
  margin-right: 10px;
}
.m-r-15{
  margin-right: 15px;
}
.m-r-20{
  margin-right: 20px;
}
.m-r-25{
  margin-right: 25px;
}



/* 盒子padding-- */
.p-5 {
  padding: 5px;
}
.p-10 {
  padding: 10px;
}
.p-15 {
  padding: 15px;
}
.p-20 {
  padding: 20px;
}
.p-50 {
  padding: 50px;
}
.p-100 {
  padding: 100px;
}
.p-150 {
  padding: 150px;
}
.p-200 {
  padding: 200px;
}

/* 盒子padding--上下间距 */
.p-tb-5 {
  padding: 5px 0;
}
.p-tb-10 {
  padding: 10px 0;
}
.p-tb-15 {
  padding: 15px 0;
}
.p-tb-20 {
  padding: 20px 0;
}
.p-tb-25 {
  padding: 25px 0;
}

.p-t-5 {
  padding-top: 5px;
}
.p-t-10 {
  padding-top: 10px;
}
.p-t-15 {
  padding-top: 15px;
}
.p-t-20 {
  padding-top: 20px;
}
.p-t-25 {
  padding-top: 25px;
}

.p-b-5 {
  padding-bottom: 5px;
}
.p-b-10 {
  padding-bottom: 10px;
}
.p-b-15 {
  padding-bottom: 15px;
}
.p-b-20 {
  padding-bottom: 20px;
}
.p-b-25 {
  padding-bottom: 25px;
}


/* 盒子padding--左右间距 */
.p-lr-5 {
  padding: 0 5px;
}
.p-lr-10 {
  padding: 0 10px;
}
.p-lr-15 {
  padding: 0 15px;
}
.p-lr-20 {
  padding: 0 20px;
}
.p-lr-25 {
  padding: 0 25px;
}

.p-l-5{
  padding-left: 5px;
}
.p-l-10{
  padding-left: 10px;
}
.p-l-15{
  padding-left: 15px;
}
.p-l-20{
  padding-left: 20px;
}
.p-l-25{
  padding-left: 25px;
}

.p-r-5{
  padding-right: 5px;
}
.p-r-10{
  padding-right: 10px;
}
.p-r-15{
  padding-right: 15px;
}
.p-r-20{
  padding-right: 20px;
}
.p-r-25{
  padding-right: 25px;
}


/* Flex 布局 */
.flex-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.flex-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/* Flex主轴排布 */
.flex-jc-center{
  justify-content: center;
}
.flex-jc-sa{
  justify-content: space-around;
}
.flex-jc-se{
  justify-content: space-evenly;
}
.flex-jc-fs{
  justify-content:flex-start;
}
.flex-jc-fe{
  justify-content:flex-end;
}

/* Flex副轴排布 */
.flex-ai-center {
  align-items: center;
}
.flex-ai-stretch{
  align-items: stretch;
}
.flex-ai-baseline{
  align-items: baseline;
}
.flex-ai-fs{
  align-items:flex-start;
}
.flex-ai-fe{
  align-items:flex-end;
}


/* Flex 伸缩 */
.flex-1 {
  flex: 1 1 auto;
}
.flex-2 {
  flex: 2 1 auto;
}
.flex-3 {
  flex: 3 auto;
}


/* 定位布局 */
.p-relative {
  position: relative;
}
.p-absolute {
  position: absolute;
}
.p-fixed {
  position: fixed;
}
.p-sticky {
  position: sticky;
}

/* 盒子层次 */
/* 盒子层次 */
.z-index_-1 {
  z-index: -1;
}
.z-index-9 {
  z-index: 9;
}
.z-index-99 {
  z-index: 99;
}
.z-index-999 {
  z-index: 999;
}

/* 字体大小 */
/* 字体大小 */
.font-size-12 {
  font-size: 12px;
}
.font-size-14 {
  font-size: 14px;
}
.font-size-16 {
  font-size: 16px;
}
.font-size-18 {
  font-size: 18px;
}
.font-size-20 {
  font-size: 20px;
}
.font-size-24 {
  font-size: 24px;
}
.font-size-28 {
  font-size: 28px;
}
.font-size-30 {
  font-size: 30px;
}
.font-size-32 {
  font-size: 32px;
}
.font-size-36 {
  font-size: 36px;
}

/* 字体颜色 */
/* 字体颜色 */
.font-white {
  color: #fff;
}
.font-black {
  color: #000;
}
.font-red {
  color: red;
}
.font-red-one {
  color: #e4393c;
}

/* 字体加粗 */
/* 字体加粗 */
.font-bold {
  font-weight: bold;
}
.font-bolder {
  font-weight: bolder;
}


/* 文字布局 */
/* 文字布局 */
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}

/* 字体不换行 */
.font-nowrap {
  white-space: nowrap;
}


/* 盒分割线 */
/* 盒分割线 */
.dline-top {
  border-top: 1px solid var(--devColor);
}
.dline-bottom {
  border-bottom: 1px solid var(--devColor);
}
.dline-left {
  border-left: 1px solid var(--devColor);
}
.dline-right {
  border-right: 1px solid var(--devColor);
}


/* 阴影 */
/* 阴影 */
.shadow {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
}
.shadow-one {
  box-shadow: 0px 5px 5px 0px rgba(12,11,16,0.1);
}


/* 盒子背景 */
/* 盒子背景 */
.bg {
  background-color: var(--devColor);
}
.bg-white {
  background-color: #fff;
}
.bg-f7f7f7 {
  background-color: #f7f7f7;
}
.bg-f8f8f8 {
  background-color: #f8f8f8;
}



/* 渐变背景 */
/* 渐变背景 */
.linear-bg-theme {
  background-image: linear-gradient(135deg, #54c5fd, #4090fd 70%, #39b9fc);
}
.linear-bg-red-origin {
  background-image: linear-gradient(135deg, #f2140c, #f2270c 70%, #f24d0c);
}

/* 圆角 */
/* 圆角 */
.radius-100prec {
  border-radius: 100%;
}
.radius-30 {
  border-radius: 30px;
}
.radius-20 {
  border-radius: 20px;
}
.radius-10 {
  border-radius: 10px;
}
.radius-5 {
  border-radius: 5px;
}
.radius-4 {
  border-radius: 4px;
}
.radius-2_5 {
  border-radius: 2.5px;
}
.radius-2 {
  border-radius: 2px;
}


/*  */
.radius-tlr-10 {
  border-top-left-radius: 10px;
  border-top-left-radius: 10px;
}
.radius-blr-10 {
  border-bottom-left-radius: 10px;
  border-bottom-left-radius: 10px;
}


/* 图片大小 */
/* 图片大小 */
.img-size-10 {
  width:10px;
  height:10px;
}
.img-size-15 {
  width:15px;
  height:15px;
}
.img-size-20 {
  width: 20px;
  height: 20px;
}
.img-size-25 {
  width: 25px;
  height: 25px;
}
.img-size-30 {
  width: 30px;
  height: 30px;
}
.img-size-40 {
  width: 40px;
  height: 40px;
}
.img-size-50 {
  width: 50px;
  height: 50px;
}
.img-size-60 {
  width: 60px;
  height: 60px;
}
.img-size-100 {
  width: 100px;
  height: 100px;
}
/*  */
.img-size-120-160 {
  width: 120px;
  height: 160px;
}


/* 缩放 */
/* 缩放 */
.scale-06 {
  display: block;
  transform: scale(0.6);
}
.scale-08 {
  display: block;
  transform: scale(0.8);
}